<!--
 * @Author: GKN
 * @Date: 2023-07-18 09:20:07
 * @LastEditTime: 2024-01-22 16:34:54
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\components\HeadTop.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="topBox" style="height: 108px;">
    <div class="mainPadding back-fff" style="">
      <div class="header max-w">
      <img class="headLogo" src="@/assets/img/logo.png" alt="">
      <div class="roght">
        <div class="banner" v-if="list_ad_banner.length>0">
          <el-carousel width="480px" height="80px" direction="vertical" indicator-position="none" interval="3500">
            <el-carousel-item v-for="item in list_ad_banner" :key="item">
              <imgView :src="item.img" type="ad" @click="proxy.$comJs.openUrl(item)" />

            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="loginMain">
          <div class="time">
            今天是   {{proxy.$comJs.today()}}
          </div>
          <div class="bom">
            <div class="bomItem" v-if="!user.name">
              <span @click="login(1)">登录</span>
              <div></div>
            </div>
            <div class="bomItem" v-if="!user.name">
              <span @click="login(2)">注册</span>
              <div></div>
            </div>
            <div v-if="user.name" style="margin-right: 26px;">
              <el-popover
                placement="top-start"
                title=""
                :width="106"
                trigger="hover"
                content=""
                popper-class="custom-popover"
              >
                <template #reference>
                  <div class="el-dropdown-link flex">
                      <div class="bomItem" style="margin-right: 2px;">
                      <span>{{ user.name||'--' }}</span>
                    </div>
                      <el-icon class="el-icon--right">
                        <arrow-down />
                      </el-icon>
                    </div>
                </template>
                <div class="selectUser">
                  <div class="item cursor-p" @click="setUp">账号设置</div>
                  <div class="item cursor-p">意见建议</div>
                  <div class="item cursor-p">帮助中心</div>
                  <div class="item cursor-p" @click="exit">退出登录</div>
                </div>
              </el-popover>
            </div>
            <div class="bomItem" v-if="loginData" style="margin-right: 5px;">
              <span></span>
              <div></div>
            </div>
            <div class="bomItem">
              <el-popover
                placement="top-start"
                title=""
                :width="180"
                trigger="hover"
                content=""
                popper-class="custom-popover"
              >
                <template #reference>
                  <span>联系客服</span>
                </template>
                <div>
                  <div class="flex flex-j-c flex-align" style="flex-direction: column;">
                      <div style="width:86px;height: 86px;" class="shadow-1 border-r6">
                          <imgView :src="code" />
                      </div>
                      <div class="font-title p-t">客服:010-64729159</div>
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
    <div class="line"></div>
  </div>
</template>
<script setup>
import CryptoJS from 'crypto-js';
import { ref,watch, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import { ArrowDown } from '@element-plus/icons-vue'
import { useStore } from 'vuex';
const store = new useStore();
  // 头部广告
  const list_ad_banner = ref([])
  const getAd=()=>{
    proxy.$http.request(proxy.$api.list_advert+'?nid=0','get',{},false, function (res) {
      if(res&&res.data){
        res.data.data.list.map((item)=>{
          if(item.location == 1){
            list_ad_banner.value.push(item)
          }
        })
        
      }
    })
  }
  getAd()
  const code = ref('')
  const getCode=()=>{
      proxy.$http.request(proxy.$api.contact,'get',{},false, function (res) {
          if(res&&res.data){
              code.value = res.data.data.code
          }
      })
  }
  getCode()
  const loginData = ref('')
  const user = ref({name:''})
  const searchStr = ref('')
  const search=()=>{
    if(!searchStr.value){
        proxy.$comJs.msg('error','请填入标题/内容')
        return;
    }
    Router.push({
        path:'/animatedly/listSearch',
        query:{
            ob:proxy.$comJs.encry({
                title:searchStr.value,
                ty:1,
                form:{
                  name:searchStr.value,
                  year:'',
                  vt: '',
                },
                first_title:'首页',
            })
        }
    });
  }
  watch(() => Router.currentRoute.value,(newValue) => {
    const log = JSON.parse(localStorage.getItem( 'loginData' ))
    if(!log){
      loginData.value = ''
      user.value.name = ''
      return;
    }else{
      loginData.value = log
      user.value.name = JSON.parse(localStorage.getItem( 'user' ))?JSON.parse(localStorage.getItem( 'user' )).name:''
    }
    // proxy.$comJs.getUserInfo()
  },
  { immediate: true }
)
  const login = (type)=>{
    if(type == 1){
      Router.push('/login');
    }
    if(type == 2){
      Router.push('/register');
    }
  }
  const exit = ()=>{
    localStorage.removeItem( 'loginData' );
    localStorage.removeItem( 'user' );
    user.value = ref({name:''})
    loginData.value = ""
    store.commit('changeName', '')
    store.commit('changeVip', 0)
    store.commit('changeUser', null)
    Router.push('/');
  }
  const setUp = ()=>{
    if(!user.value.name){
      return;
    }
    Router.push('/user');
  }
</script>
<style lang="less">
/deep/ .el-popper{
  z-index:2100 ;
}
  .topBox{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:2008;
    .header{
      width: 100%;
      background: #fff;
      height: 106px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      .logo{
        width: 345px;
        height: 62px;
      }
      .roght{
        display: flex;
        align-items: center;
        .banner{
          width: 480px;
          height: 80px;
        }
        .loginMain{
          margin-left: 100px;
          .time{
            color: #D10B00;
            line-height: 16px;
            font-size: 14px;
          }
          .bom{
            display: flex;
            margin-top: 20px;
            .bomItem:last-child{
              margin:0;
            }
            .bomItem{
              min-width: 50px;
              cursor: pointer;
              display: flex;
              align-items: center;
              margin-right: 20px;
              justify-content: center;
              span{
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: #333333;
                line-height: 16px;
              }
              div{
                width: 1px;
                height: 10px;
                background: #333333;
                margin-left: 20px;
              }
            }
          }
        }
      }
      
    }
  }
  .bannerImg{
    width: 480px;
    height: 80px;
  }
  .line{
    width: 100%;
    height: 6px;
    background: #D10B00;
  }
  .example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.selectUser{
  width: 106px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .item{
    font-size: 13px;
    line-height: 30px;
    color: #333;
    
  }
  .item:hover{
      color: #D10B00;
    }
}
</style>